﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body {
            font-family: Sans-Serif;
            font-size: .8em;
        }
        .stats {
            float: left;
            border: 1px solid silver;
            margin: 2px;
        }
        .name {
            font-size: 1.2em;
            font-weight: bold;
        }
        .api, .date {
            font-size: .6em;
        }
        .header {
            background-color: Silver;
        }
    </style>

    <script src="3rd-party/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="3rd-party/jquery.jqote2.min.js" type="text/javascript"></script>

    <script src="scripts/Soapi.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function siteMonitor()
        {

            var apiKey = 'qgAq_KfDu0KYzlNG-qaTuw';
            new Soapi.RouteFactory("", apiKey).Sites().getResponse(function(data)
            {
                var sites = [];
                for (var i = 0; i < data.items.length; i++)
                {
                    sites.push(data.items[i].api_endpoint.substring(7));
                }

                var siteIndex = 0;
                var delay = 10; // get it started
                var pollingInterval = 20000; // 20 seconds per site, > 1 minute between identical requests

                $.each(sites, function(idx, itm)
                {
                    $('<div/>').addClass('stats').attr('id', itm.replace(/\./g, '')).appendTo(document.body);
                });

                function update()
                {
                    var client = new Soapi.RouteFactory(sites[siteIndex], apiKey)
            .Stats()
            .getResponse(function(data)
            {
                var id = sites[siteIndex].replace(/\./g, '');
                $('#' + id).hide().fadeIn(100).jqotesub("#template", data.items[0]);
                siteIndex++;
                if (siteIndex == sites.length)
                {
                    siteIndex = 0;
                    delay = pollingInterval;
                }
                window.setTimeout(update, delay);
            });
                }
                update();
            });
        });
    </script>

    <script type="text/html" id="template">
    <![CDATA[
        <table>
            <tr>
                <td colspan='2' class='header'>
                    <span class='name'><%= this.site.name  %></span><br/>
                    <span class='api'>api v<%= this.api_version.version  %>.<%= this.api_version.revision  %></span><br/>
                    <span class='date'><%= new Date().toString().replace(/ GMT.*$/, '') %></span>
                </td>
            </tr>
            <tr>
                <td>Questions</td><td><%= this.total_questions  %>
                </td>
            </tr>
            <tr>
                <td>Unanswered</td><td><%= this.total_unanswered  %>
                </td>
            </tr>
            <tr>
                <td>Answers</td><td><%= this.total_answers  %>
                </td>
            </tr>
            <tr>
                <td>Comments</td><td><%= this.total_comments  %>
                </td>
            </tr>
            <tr>
                <td>Votes</td><td><%= this.total_votes  %>
                </td>
            </tr>
            <tr>
                <td>Badges</td><td><%= this.total_badges  %>
                </td>
            </tr>
            <tr>
                <td>Users</td><td><%= this.total_users  %>
                </td>
            </tr>
            <tr>
                <td>Questions bpm</td><td><%= this.questions_per_minute  %>
                </td>
            </tr>
            <tr>
                <td>Answers bpm</td><td><%= this.answers_per_minute  %>
                </td>
            </tr>
            <tr>
                <td>Badges bpm</td><td><%= this.badges_per_minute  %>
                </td>
            </tr>
        </table>          
    ]]>
    </script>

</head>
<body>
    <h1>
        Stack Exchange Site Monitor</h1>
</body>
</html>
